﻿<!-- (s) 오른쪽 영역 (s) 페이지별 특성화된 기능이 들어갈 자리 & 서버비용 충당을 고려한 베너 영역 -_-;; -->

<div class="col-sm-2 right-area" style="padding:0">
                    
<link href="/Content/eventCalendar.css" rel="stylesheet">
<link href="/Content/eventCalendar_theme.css" rel="stylesheet">
<script src="/Scripts/jquery.eventCalendar.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        // Left Category
        
        $.ajax({
            type: "GET",
            async: false,
            url: "/board/getcategorylist",
            success: function (data) {
                if (data.CategoryData) {
                    var html = "";

                    for (var i = 0; i < data.CategoryData.length; i++) {
                        if (data.CategoryData[i].categoryName == "*")
                            html += "<li data-category=" + data.CategoryData[i].categoryName + " ><a href='/board/list?category=*'><span class='badge pull-right'>" + data.CategoryData[i].articleCount + "</span>All Article</a></li>";
                        else if(data.CategoryData[i].categoryName == "")
                            html += "<li data-category=" + escape(data.CategoryData[i].categoryName) + "><a href='/board/list'><span class='badge pull-right'>" + data.CategoryData[i].articleCount + "</span>미분류</a></li>";
                        else
                            html += "<li data-category=" + escape(data.CategoryData[i].categoryName) + "><a href='/board/list?category=" + escape(data.CategoryData[i].categoryName) + "'><span class='badge pull-right'>" + data.CategoryData[i].articleCount + "</span>" + data.CategoryData[i].categoryName + "</a></li>";
                    }
                    $("#ulArticleCategory").html(html);

                    var curCategory = getQueryVariable("category", "");
                    $("#ulArticleCategory li").each(function (idx, li) {
                        if ($(li).attr("data-category") == curCategory) {
                            $(li).addClass("active");
                        } else {
                            $(li).removeClass("active");
                        }
                    });
                } else {

                }
            },
            error: function (xhr, status, error) {

            }
        });
    });
</script>
<style type="text/css">
    .rcate {
        border: solid 2px #bbbbbb;
        padding: 5px;
        margin:0;
    }
</style>

<div class="rcate">
    <div class="col-sm-12 alert alert-info h4">
        Categories
    </div>
    <ul id="ulArticleCategory" class="nav nav-pills nav-stacked"><li data-category="*"><a href="/board/list?category=*"><span class="badge pull-right">5</span>All Article</a></li><li data-category="%uBB38%uD654"><a href="/board/list?category=%uBB38%uD654"><span class="badge pull-right">1</span>문화</a></li><li data-category="%uC8FC%uC808%uC8FC%uC808"><a href="/board/list?category=%uC8FC%uC808%uC8FC%uC808"><span class="badge pull-right">2</span>주절주절</a></li><li data-category="C%23"><a href="/board/list?category=C%23"><span class="badge pull-right">1</span>C#</a></li><li data-category="Forum%20/%20%uAE30%uC0AC"><a href="/board/list?category=Forum%20/%20%uAE30%uC0AC"><span class="badge pull-right">1</span>Forum / 기사</a></li><li data-category="Javascript"><a href="/board/list?category=Javascript"><span class="badge pull-right">1</span>Javascript</a></li></ul>
    <hr>
    <div class="row" style="margin-top:20px">
        <div class="col-sm-offset-1 col-sm-10 alert alert-success h5" style="margin-bottom:10px">
            날짜별 게시글
        </div>    
        <div id="eventCalendar" class="col-sm-offset-1 col-sm-10 eventCalendar-wrap" style="padding:0px" data-current-month="6" data-current-year="2014"><div class="eventsCalendar-slider" style="height: 208px;"><div class="eventsCalendar-monthWrap currentMonth" style="width: 246px;"><div class="eventsCalendar-currentTitle"><a href="#" class="monthTitle">July 2014</a></div><ul class="eventsCalendar-daysList showAsWeek showDayNames"><li class="eventsCalendar-day-header">Sun</li><li class="eventsCalendar-day-header">Mon</li><li class="eventsCalendar-day-header">Tue</li><li class="eventsCalendar-day-header">Wed</li><li class="eventsCalendar-day-header">Thu</li><li class="eventsCalendar-day-header">Fri</li><li class="eventsCalendar-day-header">Sat</li><li class="eventsCalendar-day empty"></li><li class="eventsCalendar-day empty"></li><li id="dayList_1" rel="1" class="eventsCalendar-day "><a href="#">1</a></li><li id="dayList_2" rel="2" class="eventsCalendar-day "><a href="#">2</a></li><li id="dayList_3" rel="3" class="eventsCalendar-day "><a href="#">3</a></li><li id="dayList_4" rel="4" class="eventsCalendar-day "><a href="#">4</a></li><li id="dayList_5" rel="5" class="eventsCalendar-day "><a href="#">5</a></li><li id="dayList_6" rel="6" class="eventsCalendar-day  dayWithEvents"><a href="#">6</a></li><li id="dayList_7" rel="7" class="eventsCalendar-day "><a href="#">7</a></li><li id="dayList_8" rel="8" class="eventsCalendar-day "><a href="#">8</a></li><li id="dayList_9" rel="9" class="eventsCalendar-day "><a href="#">9</a></li><li id="dayList_10" rel="10" class="eventsCalendar-day  dayWithEvents"><a href="#">10</a></li><li id="dayList_11" rel="11" class="eventsCalendar-day "><a href="#">11</a></li><li id="dayList_12" rel="12" class="eventsCalendar-day "><a href="#">12</a></li><li id="dayList_13" rel="13" class="eventsCalendar-day "><a href="#">13</a></li><li id="dayList_14" rel="14" class="eventsCalendar-day  dayWithEvents"><a href="#">14</a></li><li id="dayList_15" rel="15" class="eventsCalendar-day "><a href="#">15</a></li><li id="dayList_16" rel="16" class="eventsCalendar-day  dayWithEvents"><a href="#">16</a></li><li id="dayList_17" rel="17" class="eventsCalendar-day today dayWithEvents"><a href="#">17</a></li><li id="dayList_18" rel="18" class="eventsCalendar-day "><a href="#">18</a></li><li id="dayList_19" rel="19" class="eventsCalendar-day "><a href="#">19</a></li><li id="dayList_20" rel="20" class="eventsCalendar-day "><a href="#">20</a></li><li id="dayList_21" rel="21" class="eventsCalendar-day "><a href="#">21</a></li><li id="dayList_22" rel="22" class="eventsCalendar-day "><a href="#">22</a></li><li id="dayList_23" rel="23" class="eventsCalendar-day "><a href="#">23</a></li><li id="dayList_24" rel="24" class="eventsCalendar-day "><a href="#">24</a></li><li id="dayList_25" rel="25" class="eventsCalendar-day "><a href="#">25</a></li><li id="dayList_26" rel="26" class="eventsCalendar-day "><a href="#">26</a></li><li id="dayList_27" rel="27" class="eventsCalendar-day "><a href="#">27</a></li><li id="dayList_28" rel="28" class="eventsCalendar-day "><a href="#">28</a></li><li id="dayList_29" rel="29" class="eventsCalendar-day "><a href="#">29</a></li><li id="dayList_30" rel="30" class="eventsCalendar-day "><a href="#">30</a></li><li id="dayList_31" rel="31" class="eventsCalendar-day "><a href="#">31</a></li></ul></div><a href="#" class="arrow prev"><span>prev</span></a><a href="#" class="arrow next"><span>next</span></a></div><div class="eventsCalendar-list-wrap" style="width: 246px;"><p class="eventsCalendar-subtitle">Articles :</p><span class="eventsCalendar-loading" style="display: none;">loading...</span><div class="eventsCalendar-list-content"><ul class="eventsCalendar-list" style="left: 0px; display: block; opacity: 1; height: auto;"><li id="0" class="meeting"><time datetime="Invalid Date"><em>8/6/2014</em><small>23:13</small></time><a href="/board/details/38" target="_self" class="eventTitle">자바스크립트의 독특한 현상, Hoisting (끌어올림)</a><p class="eventDesc "></p></li><li id="1" class="meeting"><time datetime="Invalid Date"><em>6/7/2014</em><small>16:21</small></time><a href="/board/details/42" target="_self" class="eventTitle">Hinoky 사이트가 오픈되었습니다.</a><p class="eventDesc "></p></li></ul></div></div></div>
        <script type="text/ecmascript">
            var eventsInline = [];

            $.ajax({
                type: "GET",
                async: false,
                url: "/board/getarticlesbyday",
                success: function (data) {
                    $.each(data.BoardData, function (index, value) {

                        var article = new Object();
                        article["date"] = value.WriteDate;
                        article["type"] = "meeting";
                        article["title"] = value.Title;
                        article["description"] = "";
                        article["url"] = "/board/details/" + value.Idx;

                        eventsInline.push(article);
                    });
                },
                error: function (xhr, status, error) {

                }
            });


            $("#eventCalendar").eventCalendar({
                eventsLimit: 2,
                monthNames: ["January", "February", "March", "April", "May", "June",
                    "July", "August", "September", "October", "November", "December"],
                dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
                dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
                txt_noEvents: "게시된 글이 존재하지 않습니다.",
                txt_SpecificEvents_prev: "",
                txt_SpecificEvents_after: "Articles :",
                txt_next: "next",
                txt_prev: "prev",
                txt_NextEvents: "Articles :",
                txt_GoToEventUrl: "See the article",
                showDayAsWeeks: true,
                startWeekOnMonday: false,
                showDayNameInCalendar: true,
                showDescription: true,
                onlyOneDescription: true,
                openEventInNewWindow: false,
                eventsScrollable: false,
                jsonDateFormat: 'human', // you can use also "human" 'YYYY-MM-DD HH:MM:SS'
                moveSpeed: 500,	// speed of month move when you clic on a new date
                moveOpacity: 0.15, // month and events fadeOut to this opacity
                jsonData: eventsInline, 	// to load and inline json (not ajax calls)
                cacheJson: true
            });
        </script>
    </div>
</div>                    <p>
</p><div class="row">
		<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<!-- 오른쪽 광고 - 1 -->
		<div style="display: inline-block; width: 250px; height: 250px;border-style:solid; border-width:1px" >오른쪽 광고 영역</div>
</div>
</div>